:root {
  --custom-row-data: #3737371a;
  --custom-sever-info: #60626699;
  --text-color: #606266;
  --custom-sensor-info: #606266b3;
  --custom-schedule-box: #6062664d;
  --custom-schedule-inner: #606266b3;
  --custom-collapse-content: #6062663d;
}
#app {
  background: url('@/assets/images/layout/theme-bg-yqy.png') no-repeat center
    center;
  background-size: 100% 100%;
}
input:-webkit-autofill {
  -webkit-text-fill-color: #606266;
}
.menu-header {
  padding: 10px;
  height: auto !important;
  margin-bottom: -30px;
  &.hide-before {
    .ant-avatar {
      visibility: hidden;
    }
  }
  .ant-avatar {
    position: relative;
    z-index: 100;
  }
}
.ant-layout-sider {
  padding: 20px 20px 18px;
}
.ant-layout-sider .ant-menu-item-selected {
  overflow: visible;
  &::after {
    background: url('@/assets/images/layout/menu-select-bg-yqy.png') no-repeat
      center center;
    background-size: 100% 100%;
    width: 224px;
    left: -18px;
  }
  background: transparent;
}

.ant-layout-sider .ant-layout-sider-children {
  background: rgba(255, 255, 255, 0.36);
  box-shadow: 0px 0px 14px 0px rgba(228, 228, 228, 0.4);
  border-radius: 8px 8px 8px 8px;
  .sidebar-logo {
    position: relative;
    text-align: center;
    color: #0f1010;
    font-weight: 600;
    line-height: 50px;
    font-size: 15px;
    display: block;
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      left: 0;
      height: 1px;
      bottom: 1px;
      background: linear-gradient(
        90deg,
        rgba(0, 122, 223, 0),
        rgba(0, 122, 223, 0.6) 49%,
        rgba(0, 122, 223, 0)
      );
    }
  }
}
.pro-menu {
  padding-block: 0;
}
.ant-breadcrumb {
  // font-size: 16px;
  a:hover {
    color: #1890ff;
  }
}
.main-content {
  // background-color: #0000005c;
  // padding: 0 20px;
  position: relative;
}
.ant-table-wrapper .ant-table-thead > tr,
.ant-table-wrapper .ant-table-thead > tr > th,
.ant-table-wrapper .ant-table-thead > tr > td {
  background-color: #fff;
}
.tab-views {
  & > .ant-tabs-nav::before {
    border-bottom: 1px solid #e6ebf5;
  }
  .custom-tab-bar-style {
    background-color: #d7dbe1;
    color: #82848a;
    border: 1px solid #d7dbe1;
  }
  .ant-tabs-tab-active .custom-tab-bar-style {
    background-color: #f2f5fa;
    border-bottom-color: #f2f5fa;
    color: #333;
  }
}
.ant-table-wrapper {
  tr.ant-table-row > td {
    // background: #00000033;
  }
  tr.ant-table-row-selected > td {
    // background: #0000006e !important;
  }
  tr.ant-table-row:hover > td,
  tr.ant-table-row-selected:hover > td,
  td.ant-table-cell-row-hover {
    // background: #f5f7fa !important; // table hover bg
  }
}

::-webkit-scrollbar-track {
  background: #f8f8f9; /* 滚动条轨道背景色 */
}
::-webkit-scrollbar-thumb {
  background-color: #dfe6ec;
}
.pro-table {
  .ant-table-body {
    &::-webkit-scrollbar-track {
      background: #f8f8f9; /* 滚动条轨道背景色 */
    }
    &::-webkit-scrollbar-corner {
      background: #f8f8f9;
    }
    &::-webkit-scrollbar-thumb {
      background-color: rgba(0, 0, 0, 0.15); /* 滚动条颜色和透明度 */
    }

    &::before,
    &::after {
      content: '';
      position: absolute;
      transition: all 0.7s;
      background: #f6f9fe;
      pointer-events: none;
      opacity: 1;
    }
    &:hover {
      &::before,
      &::after {
        opacity: 0;
      }
    }
    &::before {
      width: 100%;
      height: 10px;
      bottom: 0;
    }
    &::after {
      width: 10px;
      right: 0;
      top: 47px;
      bottom: 0;
    }
  }
}
.ant-select-dropdown,
.ant-tree-select-dropdown,
.ant-picker-dropdown {
  background: #fff !important;
}

.ant-tag-processing {
  background: transparent;
  border-color: #007adf;
  color: #007adf;
}
.ant-tag-success {
  background: transparent;
  border-color: #19b4a1;
  color: #19b4a1;
}
.ant-tag-warning {
  background: transparent;
  border-color: #f19335;
  color: #f19335;
}
.ant-tag-error {
  background: transparent;
  border-color: #ff435a;
  color: #ff435a;
}
.ant-tag-default {
  background: transparent;
  border-color: #6d78a6;
  color: #6d78a6;
}
// modal弹窗样式
.ant-modal .ant-modal-content {
  border: none !important;
  box-shadow: 0 0 20px 5px rgba(0, 21, 41, 0.35) !important;
}
.ant-modal .ant-modal-header {
  background-color: transparent;
}

$color-black: #f1f1f1;
.pro-form-modal {
  .ant-form-item .ant-form-item-label {
    text-align: left;
  }
  .ant-input-affix-wrapper,
  .ant-input-number,
  .ant-select-selector {
    box-shadow: none !important;
  }
  .ant-form-item:has(
      .ant-input-disabled,
      .ant-input-number-disabled,
      .ant-input-affix-wrapper-disabled,
      .ant-select.ant-select-disabled,
      .ant-select-multiple.ant-select.ant-select-disabled,
      .ant-radio-wrapper-disabled
    ) {
    .ant-form-item-label > label.ant-form-item-required::before {
      color: transparent;
    }
    .ant-input-textarea-show-count::after {
      display: none;
    }
    input::placeholder,
    textarea::placeholder {
      color: transparent;
    }
  }
  .ant-select.ant-select-disabled,
  .ant-select-multiple.ant-select.ant-select-disabled {
    .ant-select-selector
    /*,.ant-select-selection-item*/ {
      background-color: $color-black;
      color: currentColor;
    }
    .ant-select-arrow {
      display: none;
    }
    .ant-select-selection-placeholder {
      color: transparent;
    }
  }
  .ant-input-disabled {
    color: currentColor;
    background-color: $color-black;
    resize: none;
  }
  .ant-input-number-disabled {
    background-color: $color-black;
  }
  .ant-input-affix-wrapper {
    &:has(.ant-input-disabled) {
      background-color: $color-black;
      color: currentColor;
      + .ant-input-group-addon {
        background: $color-black;
      }
    }
  }
}

.modal-tab-bg .ant-modal-content {
  background: url('@/assets/images/tab-rigt-bg-yqy.png') no-repeat 169px top;
  &::after {
    content: ' ';
    position: absolute;
    top: 0;
    left: 0px;
    width: 169px;
    height: 100%;
    background: linear-gradient(270deg, #e4f1fb 0%, #f1f8fd 78%);
    background-size: cover;
    pointer-events: none;
    z-index: -1;
  }
  .tab-collapse {
    .ant-collapse-item {
      width: 145px;
    }
    .ant-btn {
      z-index: 1;
      text-align: left;
      &:hover {
        background: transparent;
      }
    }
    .ant-space-item:has(.active) {
      position: relative;
      &::after {
        content: ' ';
        position: absolute;
        top: -13px;
        left: -40px;
        width: 169px;
        height: 58px;
        background: url(@/assets/images/tab-select-bg-yqy.png) no-repeat;
        background-size: cover;
        pointer-events: none;
      }
    }
    .ant-collapse-header {
      padding-left: 0;
      padding-bottom: 0;
    }
    .ant-collapse-header-text {
      white-space: nowrap;
    }
  }
}

.ant-descriptions.ant-descriptions-bordered .ant-descriptions-row {
  border-bottom: 1px solid #f2f2f233;
}

.ant-select-multiple .ant-select-selection-item {
  background-color: var(--alertLevel, #4daede) !important;
}

.monitor-server {
  .ant-card {
    border-radius: 12px;
  }
  .ant-descriptions-view {
    background-color: rgba(0, 0, 0, 0.24);
  }
}

.footer-buttons {
}
.card-container {
  background-color: #eff2f4;
}
.pro-pagination {
  background-color: #f6f9fe;
  padding-right: 1rem;
}
.ql {
  color: #2ec5c5;
  border-color: #2ec5c5;
}
.zl {
  color: #8f8f8f;
  border-color: #8f8f8f;
}
.pro-table-control .project-tree {
  background-color: #fff !important;
}
.fast-config {
  background: #fff;
  cursor: pointer;
  &:hover {
    box-shadow: 0px 0px 24px 0px rgba(29, 27, 41, 0.16);
  }
}

.warning-collapse {
  .ant-collapse-header {
    background-color: #fff;
  }
  .ant-collapse-content-active {
    background-color: #f4faff !important;
  }
}

.yqy-border-padding {
  padding: 0;
  border: 1px solid #dcdfe6;
}
